<template>
  <el-card class="box-card">
  <div slot="header" class="clearfix title">
    <span>评论</span>
    
  </div>
  <div>
      <template v-for="commoment in commomentList">
        <el-row :gutter="20" :key="commoment.commomentId" class="row" >
            <el-col :span="5"><p class="name">{{commoment.userInfoBean.userName}}：</p></el-col>
            <el-col :span="15"><p>{{commoment.commomentContent}}</p></el-col>
            <el-col :span="4" class="zan">
                
                <img v-if="commoment.doLike" src="../assets/zan_active.png" alt="" @click="doOrCancelLike(commoment.commomentId)">
                <img v-else src="../assets/zan.png" alt="" @click="doOrCancelLike(commoment.commomentId,true)">
                <span>{{commoment.commomentLikeCount}}</span>
            </el-col>
        </el-row>
        <el-divider :key="commoment.commomentId" class="divider"></el-divider>
       </template>
   
  </div>
</el-card>
</template>

<script>
import {mapState,mapActions} from 'vuex';
import {getUser} from '../service/user'
import {doLike,cancelLike} from '../service/commoment'
export default {
    data(){
        return {
            user:{}
        }
    },
    async created(){
        let response = await getUser(this.$cookies.get('token'));
        this.user = response.data;
        if(!this.user){
            this.user = {}
        }
        await this.setCommomentList(this.user.userId);
        console.log(this.commomentList);
        
    },
    computed:{
        ...mapState('commoment',['commomentList'])
    },
    methods:{
        async doOrCancelLike(commomentId,isDoLike){
            if(!this.user.userId){
                // 如果没有，不允许点赞或取消
                alert('请先登录');
                return;
            }
            if(isDoLike){
                await doLike(commomentId,this.user.userId,this.$cookies.get('token'));
            }else{
                await cancelLike(commomentId,this.user.userId,this.$cookies.get('token'));
            }
            
            await this.setCommomentList(this.user.userId);
            

        },
        ...mapActions('commoment',['setCommomentList'])
    }
}
</script>

<style>
.title{
    text-align: center;
    font-size:2em;
}
    p.name{
        text-align: right;
    }
    .zan{
        display: flex;
        align-items: center;
        font-size: .7em;
    }
    .zan img{
        width:18px;
        height:18px;
        margin-right:5px;
    }
    .row{
        display: flex;
        align-items: center;
    }
    .divider{
        margin:0;
    }
</style>